<template>
  <div style="margin-bottom: 5%">
    <el-row>
      <div align="center">
        <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="4rem" color="#1989fa"></van-icon>
      </div>
    </el-row>
    <el-row>
      <div style="text-align: center;font-weight: bold">{{ staffInfo.name }}</div>
      <div style="text-align: center;font-size: 10px">班组：{{classGroup}}</div>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div style="border-right: 1px solid black">
          <div style="text-align: center;font-size: 10px">部门</div>
          <div style="text-align: center;font-weight: bold;margin-top: 1px">{{ staffInfo.department }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="border-left: 1px solid black">
          <div style="text-align: center;font-size: 10px">职位</div>
          <div style="text-align: center;font-weight: bold;margin-top: 1px">{{ position }}</div>
        </div>
      </el-col>
    </el-row>


    <div style="margin-top: 1%" v-for="(item,index) in functionalList" @click="item.singleClick">
      <van-cell
          :key=index
          :title=item.title
          :is-link=item.isLink
          :value=item.value
          :icon=item.icon
      ></van-cell>
    </div>
  </div>
</template>

<script>
// JS区域
export default {
  // 数据区域
  name: "myInformationShow",
  data() {
    // data
    return {
      staffInfo: {
        id: null,     //个人id
        name: "佚名",
        role: null,
        phone: "电话号码",
        department: "{未知}",
        classGroup: -1,   //-1表示还未绑定班组
        sex: null,      //0为男性, 1为女性
        age: null,
        email: "987654321@qq.com",
      },
      classGroup: '{暂无}',
      position: '{未知}',
      functionalList: [{
        title: '电话信息',
        isLink: false,
        value: "电话号码",
        icon: 'phone-o',
        singleClick: this.phoneClick
      }, {
        title: '个人信息',
        isLink: true,
        icon: 'user-o',
        singleClick: this.userInfoClick
      }, {
        title: '人员管理',
        isLink: true,
        icon: 'friends-o',
        singleClick: this.userManage
      }, {
        title: '退出登陆',
        isLink: true,
        icon: 'revoke',
        singleClick: this.backToLogin
      },]
    }
  },
  // 组件初始化前的准备操作，在此处执行
  created() {
    // 事件监听，this.$bus.$on事件一般在此处定义
    // 将sessionStorage中的数据取出时是一个string对象, 因此通过JSON.parse()方法将其转化成Object对象
    let staffInfoSave = JSON.parse(sessionStorage.getItem('singleUserInfo'))
    // 如果sessionStorage中存在 singleUserInfo
    if(staffInfoSave){
      this.staffInfo = {}
      this.staffInfo = staffInfoSave

      // console.log(this.staffInfo)
      if (this.staffInfo.classGroup !== -1) {
        this.classGroup = this.staffInfo.classGroup + '组'
      }
      // 角色判断职位
      switch (this.staffInfo.role){
        case 0:
          this.position = '管理员'
          break;
        case 1:
          this.position = '主管'
          break;
        case 2:
          this.position = '工长'
          break;
        case 3:
          this.position = '组长'
          break;
        case 4:
          this.position = '组员'
          break;
        case 5:
          this.position = '访客'
          break;
      }

      //加载电话号码
      this.functionalList[0].value = this.staffInfo.phone
    }
    // 初始数据载入

  },
  // 组件初始化后需要进行的操作，在此处执行
  mounted() {
    // 组件渲染，传递参数，this.$bus.$emit

  },
  // JS方法
  methods: {
    phoneClick(){
      //! 事件接口-电话信息;

    },
    userInfoClick(){
      //! 事件接口-个人信息;
      this.$dialog({
        message: '个人信息-未配置'
      })
    },
    userManage(){
      //! 事件接口-人员管理;
      this.$dialog({
        message: '人员管理-未配置'
      })
    },
    backToLogin(){
      //! 事件接口-退出登录;
      sessionStorage.removeItem('singleUserInfo')
      this.$dialog.confirm({
        message: '确认清除对应的singleUserInfo数据?'
      }).then(()=>{
        //刷新当前页面
        window.location.reload();
      }).catch(()=>{
        //取消的操作
      })

    },
    //! 其他方法接口;


  }
}
</script>

<style scoped>
.templateBox {
  width: 100%;
  text-align: center;
}
.templateItem{
  width: 100%;
  text-align: center;
  padding-left: 5%;
  padding-right: 5%;
  margin-bottom: 5%;
}
</style>
